import * as echarts from '../../components/ec-canvas/echarts';
const http = require("../../api/index")

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {},
      fail: function () {}
    }
  },
  data: {
    ec: {
      lazyLoad: true, //延迟加载
    },
    dataArr: [],
    topList: [],
    bottomList: []
  },
  // 获取当前月的每一天日期
  getEveryDay() {
    let curDate = new Date();
    let curMonth = curDate.getMonth();
    curDate.setMonth(curMonth + 1);
    curDate.setDate(0);
    let day = curDate.getDate();
    let d = new Date().getDate()
    // 获取当前日期
    let date = new Date();
    // 获取当前月份
    let nowMonth = date.getMonth() + 1;
    // 对月份进行处理，1-9月在前面添加一个“0”
    if (nowMonth >= 1 && nowMonth <= 9) {
      nowMonth = "0" + nowMonth;
    }
    for (let k = 1; k <= d; k++) {
      // 对日期进行处理，1-9号在前面添加一个“0”
      if (k >= 0 && k <= 9) {
        k = "0" + k;
      }
      this.data.dataArr.push(`${nowMonth}/${k}`);
    }
    this.setData({
      dataArr: this.data.dataArr.reverse(),
    })
  },
  getEveryInfo() {
    http.getListInfoNumber().then(res => {
      this.setData({
        dataArr: this.data.dataArr.reverse(),
        topList: res.data[0],
        bottomList: res.data[1]
      })
      console.log("获取的东西、。", res);
      this.loadBar(this.data.dataArr.reverse(), res.data[0], res.data[1])
    })
  },
  // echarts图
  loadBar(date, salesR, stockroomR) {
    let line = this.selectComponent('#mychart-dom-line')
    line.init((canvas, width, height, dpr) => {
      const lineChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      })
      var lineOperation = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value'
        },
        series: [{
            name: '预约数',
            type: 'line',
            stack: 'Total',
            itemStyle: {
              normal: {
                color: '#3097FE', //改变折线点的颜色
                lineStyle: {
                  color: '#3097FE' //改变折线颜色
                }
              }
            },
            data: salesR
          },
          {
            name: '销售额',
            type: 'line',
            stack: 'Total',
            itemStyle: {
              normal: {
                color: '#4BB84B', //改变折线点的颜色
                lineStyle: {
                  color: '#4BB84B' //改变折线颜色
                }
              }
            },
            data: stockroomR
          }
        ],
        dataZoom: [{
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: "slider",
            // 设置背景颜色
            backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: "rgb(19, 63, 100)",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 5,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            width: "80%",
            // 设置滚动条高度
            height: 5,
            // 设置滚动条显示位置
            left: "center",
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: 1,
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ]
      }
      lineChart.setOption(lineOperation)
      return lineChart
    })
  },
  onLoad(options) {

    this.getEveryDay()
    this.getEveryInfo();
  },
  onReady() {}
});